<template>
  <j-modal
    :title="title"
    :width="width"
    :visible="visible"
    switchFullscreen
    @cancel="handleCancel">
    <template #footer>
      <a-button key="1" @click="handleCancel">关闭</a-button>
    </template>

    <a-row :gutter="10">
    <a-col :md="8" :sm="24">
      
      <leftTreeData ref='tree' :publishId="publishId" @input="orgClick" :formType="formType"/>

    </a-col>
    <!-- 右侧区域 -->
    <a-col :md="16" :sm="24">
      <a-form layout="inline">
        <a-row :gutter="10">
          <a-form-item label="用户姓名">
            <a-input placeholder="请输入用户姓名" v-model="realName" @change='ipagination.current=1;getRightData()'/>
          </a-form-item>
          <a-form-item label="阅读状态">
            <j-dict-select-tag style="width: 200px" v-model="readStatus" @input='changeReadStatus' placeholder="请选择阅读状态" dictCode="read_status"/>
          </a-form-item>
          <a-form-item>
            <a-button @click="searchReset" icon="reload">重置</a-button>
          </a-form-item>
          <a-form-item>
            <a-button @click="downloadRead" type="primary">下载</a-button>
          </a-form-item>
        </a-row>
      </a-form>

      <div class="item-btn-mar">
        <a-table
          ref="table"
          size="middle"
          rowKey="id"
          bordered
          :scroll="{ y: 500 }"
          :columns="columns"
          :dataSource="dataSource"
          :pagination="ipagination"
          :loading="rightLoading"
          @change="ipagination.current = $event.current;ipagination.pageSize=$event.pageSize;getRightData()">

        </a-table>
      </div>
    </a-col>
  </a-row>

  </j-modal>
</template>

<script>
import { downFile,getAction } from '@/api/manage'
import leftTreeData from '../comp/leftTreeData'

export default {
  name: 'ReadingSituation',
  components:{
    leftTreeData
  },
  props:{
    // 区分是通知公告or意见征集
    formType:{
      type: String,
      default: 'notice'
    },
    publishId:{
      type: String,
      default:''
    },
  },
  data () {
    return {
      title:'',
      width:1400,
      visible: false,
      rightLoading: false,
      disableSubmit: false,
      loading: false,
      orgCode:'',
      leftDataSource: [], //左侧树形数据
      dataSource: [],//右侧列表数据
      findDeptSelectEmpUser: '/api/erp/publishNotice/findDeptSelectEmpUser',
      realName:'',
      readStatus:'',
      columns:[{
                title: '序号',
                width:60,
                dataIndex:'id',
                align:"center",
                customRender:function (t,r,index) {
                return parseInt(index)+1;
                }
            },{
                title:'用户账号',
                align:"center",
                dataIndex:'username',
                ellipsis: true,
            },{
                title:'用户姓名',
                align:"center",
                dataIndex: 'realname',
                ellipsis: true,
            },{
                title:'部门',
                align:"center",
                dataIndex:'orgCodeTxt',
                ellipsis: true,
            },{
                title:'状态',
                align:"center",
                dataIndex: 'readStatus_dictText',
                ellipsis: true,
            }],
      ipagination:{
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + "-" + range[1] + " 共" + total + "条"
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
    }
  },
  mounted(){

    if(this.formType==='opinion'){
      this.findDeptSelectEmpUser = '/api/erp/publishCollect/findDeptSelectEmpUser'
    }

  },
  methods: {
    // 下载阅读
    downloadRead(){
      let url = ''
      if(this.formType==='opinion'){
        url = '/api/erp/publishCollect/exportDeptSelectEmpUser'
      } else {
        url = '/api/erp/publishNotice/exportDeptSelectEmpUser'
      }
      const params = {
        noticeId: this.publishId,
        collectId: this.publishId,
        orgCode:this.orgCode,
        pageNo: this.ipagination.current,
        pageSize: this.ipagination.pageSize,
        realName: this.realName,
        readStatus: this.readStatus
      }
      downFile(url,params).then(data => {
        if (!data) {
          this.$message.warning('文件下载失败')
          return
        }
        let url = window.URL.createObjectURL(
          new Blob([data], {
            type: 'application/vnd.ms-excel'
          })
        )
        let link = document.createElement('a')
        link.style.display = 'none'
        link.href = url
        link.setAttribute('download',  '阅读情况.xls')
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link) // 下载完成移除元素
        window.URL.revokeObjectURL(url) // 释放掉blob对象
        this.batchExportLoading = false;
      })
    },
    // 初始化
    init () {
      this.visible=true
      this.title='阅读情况'
      
      this.$nextTick(()=>{
          this.$refs.tree.queryTreeData()
        })

    },
    searchReset(){
      this.readStatus = ''
      this.realName = ''
      this.getRightData()
    },
    // 树点击 
    async orgClick(orgCode){
      this.orgCode = orgCode
      this.ipagination.current = 1
      this.getRightData()
    },
    changeReadStatus(value){
      this.ipagination.current = 1
      this.readStatus = value
      this.getRightData()
    },

    async getRightData(){
      this.rightLoading = true
      let res = await getAction(this.findDeptSelectEmpUser,{
        noticeId: this.publishId,
        collectId: this.publishId,
        orgCode:this.orgCode,
        pageNo: this.ipagination.current,
        pageSize: this.ipagination.pageSize,
        realName: this.realName,
        readStatus: this.readStatus
      })
      this.rightLoading = false
      if(res.success){
        const {records,current,total} = res.result

        this.ipagination.total= total || 0

        this.dataSource = records
      }else{
        this.dataSource = []
      }
    },
    handleCancel () {
      this.$emit('close')
      this.visible = false
    },
  }
}
</script>